<template>

  <div class="test">
       <div class="title">
     <div class="test-icon">
      <van-image
        round
     width="1.5rem"
     height="1.5rem"
     :src="icon"
    />
    <span class="nickname">{{ nickname }}</span>
     </div>
    <UserCtrl :show="show" :id="id" @click="changeShow"/>
  </div>

    <p class="cont" @click="$router.push({name:'test',query:{id:id}})">{{ content }}</p>

    <div class="video">
      <van-image
      v-for="item in video_list"
       :src="item.cover" 
      class="video-img"
      fit="cover"
    />
    <van-icon v-if="video_list" name="play" class="play" size="40" color="#fff"/>
       <!-- <video class="video-item" v-for="item in video_list"
       :src="item.video_url" 
       controls
       > -->
       <!-- <video id="myVideoTwo" v-for="item in video_list" :poster="item.video_url" >
      <source :src="item.video_url" type="video/mp4" />
    </video> -->
       <!-- </video> -->
    </div>


    <div class="my-tag">
      <div v-for="item in tag_list" class="my-tag-item" 
      @click="$router.push({name:'micircle',query:{id:item.id}})"
      >
        <!-- <van-image
        
     width="1rem"
     height="1rem"
     :src="item.img"
    /> -->
    <span class="my-tag-name">{{ item.tag }}</span>
      </div>
    </div>
    <div class="hot-comment" v-if="hot_comment">
      <div class="comment"><span class="name">{{ hot_comment.name }}:</span>
      <span >{{ hot_comment.comment }}</span>
    </div>
       <div class="belong-place">{{ hot_comment.belong_place }}</div>
     
     </div>


     <CardCtrl :praise_num="praise_num" :answer_num="comment_num" :id="id" :my_up="props"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import CardCtrl from '../../../../components/CardCtrl.vue'
const props = defineProps<{
  id:number,
  nickname:string,
  icon: string,
  content_type:number,
  content: string,
  praise_num: string,
  comment_num: string,
  hot_comment: ({
    name:string,
    comment:string,
    belong_place:string,
  }|null)

  tag_list: Array<{
  id: number,
  tag: string,
  tag_type:number,
  tag_id: string,
  img: string,
  }>,
  video_list?: Array<{
  video_url: string,
  cover: string,
  duration:number,
  }>
}>()
let show = ref(false);
const changeShow = () => {
  show.value = !show.value;
  
}
</script>

<style scoped lang="scss">
.test {
  padding:.625rem;
  background-color: #fff;
}
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .test-icon {
  display: flex;
  align-items: center;
  .nickname {
  font-size: .78rem;
  margin-left: .3rem;
}
}

}
.cont {
  margin: .6rem 0rem;
  font-size: .95rem;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.my-tag {
  width: 100%;
  margin-bottom: .3rem;
  display: flex;
  flex-wrap: wrap;
  .my-tag-item {
  display: flex;
  align-items: center;
  padding: .3rem 0rem;
  background-color: #f6f6f6;
  margin-right: 1.25rem;
  border-radius: .3rem;
  margin-top: .4rem;
  .my-tag-name {
  padding: 0rem .3rem;
  font-size: .8rem;
  color:#757575;
}
}
}


.hot-comment {
  margin: .625rem 0rem;
  padding: .625rem;
  background-color: #f6f6f6;
  border-radius: .35rem;
  .comment {
  // display: flex;
  font-size: .85rem;
  .name {
  width: 3.75rem;
  color:#757575;
  padding-right: 5px;
}

}

}

.belong-place {
  font-size: 0.85rem;
  color:#757575;
}
.video {
  position: relative;
:deep(.van-image__img){
  border-radius: .5rem;
}
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 20rem;
}
}
</style>